<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="renderer" content="webkit" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <title>note</title>
    <link rel="stylesheet" type="text/css" href="/static/libs/purecss/pure-1.0.0.min.css" />
    <!--[if lte IE 8]>
        <link rel="stylesheet" href="/static/libs/purecss/grids-responsive-old-ie-min.css">
    <![endif]-->
    <!--[if gt IE 8]><!-->
    <link rel="stylesheet" href="/static/libs/purecss/grids-responsive-min.css">
    <!--<![endif]-->
    <link rel="stylesheet" type="text/css" href="/static/utils/top-menu/custom.css" />
    <style type="text/css">
        .grids-example {
            background: rgb(250, 250, 250);
            margin: 2em auto;
            border-top: 1px solid #ddd;
            border-bottom: 1px solid #ddd;          
            font-family: Consolas, 'Liberation Mono', Courier, monospace;
            text-align: center;                 
        }
        .custom-restricted-width {
            display: inline-block;
            /* width: 10em; */
        }
    </style>
</head>
<body>
    <div class="custom-wrapper pure-g" id="menu">
        <div class="pure-u-1 pure-u-md-1-3">
            <div class="pure-menu">
                <a href="javascript:;" class="pure-menu-heading custom-brand">Home</a>
                <a href="javascript:;" class="custom-toggle" id="toggle">
                    <i class="bar"></i>
                    <i class="bar"></i>
                    <i class="bar"></i>
                </a>
            </div>
        </div>
        <div class="pure-u-1 pure-u-md-1-3">
            <div class="pure-menu pure-menu-horizontal custom-can-transform">
                <ul class="pure-menu-list">
                    <li class="pure-menu-item" data-id="blog">
                        <a href="{{ url_for('visit.article') }}" class="pure-menu-link">Blog</a>
                    </li>
                    <li class="pure-menu-item" data-id="about">
                        <a href="#" class="pure-menu-link">About</a>
                    </li>
                    <li class="pure-menu-item" data-id="admin">
                        <a href="{{ url_for('admin.index') }}" class="pure-menu-link">Admin</a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="pure-u-1 pure-u-md-1-3">
            <div class="pure-menu pure-menu-horizontal custom-menu-3 custom-can-transform">
                <ul class="pure-menu-list">
                    <li class="pure-menu-item" data-id="project">
                        <a href="#" class="pure-menu-link">Project</a>
                    </li>
                    <li class="pure-menu-item" data-id="contact">
                        <a href="#" class="pure-menu-link">Contact</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div>
        <a class="pure-button pure-button-primary" href="#">A Primary Button</a>
    </div>
    <div class = "grids-example">
        <div class = "pure-g">
            <div class = "pure-u-1-3"><p>First Column</p></div>
            <div class = "pure-u-1-3"><p>Second Column</p></div>
            <div class = "pure-u-1-3"><p>Third Column</p></div>
        </div>
    </div>

    <a href="https://purecss.io/menus/#dropdowns">https://purecss.io/menus/#dropdowns</a>
    <div class="pure-menu pure-menu-horizontal">
        <ul class="pure-menu-list">
            <li class="pure-menu-item pure-menu-selected">
                <a href="#" class="pure-menu-link">Home</a></li>
            <li class="pure-menu-item pure-menu-has-children pure-menu-allow-hover">
                <a href="#" id="menuLink1" class="pure-menu-link">Contact</a>
                <ul class="pure-menu-children">
                    <li class="pure-menu-item"><a href="#" class="pure-menu-link">Email</a></li>
                    <li class="pure-menu-item"><a href="#" class="pure-menu-link">Twitter</a></li>
                    <li class="pure-menu-item"><a href="#" class="pure-menu-link">Tumblr Blog</a></li>
                </ul>
            </li>
        </ul>
    </div>

    <div class="pure-menu custom-restricted-width">
        <ul class="pure-menu-list">
            <li class="pure-menu-item pure-menu-selected">
                <a href="#" class="pure-menu-link">Flickr</a>
            </li>
            <li class="pure-menu-item">
                <a href="#" class="pure-menu-link">Messenger</a>
            </li>
            <li class="pure-menu-item">
                <a href="#" class="pure-menu-link">Sports</a>
            </li>
            <li class="pure-menu-item">
                <a href="#" class="pure-menu-link">Finance</a>
            </li>
            <li class="pure-menu-item pure-menu-has-children">
                <a href="#" id="menuLink1" class="pure-menu-link">More</a>
                <ul class="pure-menu-children">
                    <li class="pure-menu-item">
                        <a href="#" class="pure-menu-link">Autos</a>
                    </li>
                    <li class="pure-menu-item">
                        <a href="#" class="pure-menu-link">Flickr</a>
                    </li>
                    <li class="pure-menu-item pure-menu-has-children">
                        <a href="#" id="menuLink1" class="pure-menu-link">Even More</a>
                        <ul class="pure-menu-children">
                            <li class="pure-menu-item">
                                <a href="#" class="pure-menu-link">Foo</a>
                            </li>
                            <li class="pure-menu-item">
                                <a href="#" class="pure-menu-link">Bar</a>
                            </li>
                            <li class="pure-menu-item">
                                <a href="#" class="pure-menu-link">Baz</a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
    <script type="text/javascript" src="/static/utils/top-menu/custom.js"></script>
    <script type="text/javascript" src="/static/utils/drop-down.js"></script>
</body>
</html>